import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import { useState } from 'react'
import BackgroundSwitcher from '../../components/BackgroundSwitcher/index';
import './index.scss'
import icon1 from '../../assets/icon1.png'
import icon2 from '../../assets/icon2.png'

const imageList = ['https://images.pexels.com/photos/6473736/pexels-photo-6473736.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', 'https://images.pexels.com/photos/8128700/pexels-photo-8128700.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', 'https://images.pexels.com/photos/7153017/pexels-photo-7153017.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', 'https://images.pexels.com/photos/7153018/pexels-photo-7153018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1']

export default function Index() {
  const [index, setIndex] = useState(0)

  return (
    <View className='Guide'>
      <BackgroundSwitcher imageUrls={imageList} index={index} />
      <View className="container">
        <Swiper
          className='Swiper'
          circular
          autoplay
          onChange={e => setIndex(e.target.current)}>
          {imageList.map(url => <SwiperItem className="SwiperItem" key={url}>
            <Image src={url} mode="aspectFill" />
          </SwiperItem>)}
        </Swiper>
        <View className="pagination">
          {imageList.map((url, i) => <View className={i === index ? 'active' : ''} key={url}></View>)}
        </View>
        <View className="content">
          <Text>立即开始</Text>
          <Text>你的AI之旅</Text>
          <Text>选择下方两个按钮开始浏览或创作吧</Text>
          <View className="btns">
            <Image src={icon1} mode="aspectFill" />
            <Image src={icon2} mode="aspectFill" />
          </View>
        </View>
      </View>
    </View>
  )
}
